QML使用QtWebEngine显示HTML【Echarts】 |
您所在的位置：网站首页 › qml debug输出结果调转页面 › QML使用QtWebEngine显示HTML【Echarts】 |
QML使用QtWebEngine显示HTML【Echarts】
|
1、前言 虽然标题是Echarts，但是实际上是QML加载HTML，而Echarts提供酷炫的控件可以让我们在HTML里使用，所以这边文章核心是QML+HTML【注意不是Qt+HTML】。 很多博客都说了两种方式加载HTML，如QtWebKit、QtWebEngine、QAxWidget。。这里需要注意： ①、QtWebKit：Qt5.6以后已经被Qt官方停止支持，还是不使用了吧； ②、QtWebEngine：Qt5.6以后提出，但是只能用MSVC版本，故如果程序只运行在Windows上，还是可以的，Linux就算了吧； ③、QAxWidget：Qt5.6以后的mingw版本，可以用来显示网页。【我记得对excel的的操作是用的QAxObject，查了一下，可以理解QAxWidget是显示office，QAxObject是后台处理office】
本文是在QML中使用QtWebEngine显示HTML，环境是VS2017+Qt5.14，编译器使用MSVC2017_32
2、新建Quick工程 其实我是直接下载的网友的工程：https://blog.csdn.net/qq_27081181/article/details/100528492
如图，主要有： echart-all.js：官方的js库【https://echarts.baidu.com/echarts2/doc/example.html】 pie.html：使用了echarts的html，暂不讨论咋实现的 main.qml：主qml，是个window，里面加载了pie.html qml.qrc：资源文件，导入上面三个文件 main.cpp：main函数
3、相关代码 ①、pie.html： DOCTYPE html> ECharts html,body,#echarts{ margin:0px; padding:0px; width:100%; height:100%; } // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts')); // 指定图表的配置项和数据 var option = { title : { text: '南丁格尔玫瑰图', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} {b} : {c} ({d}%)" }, legend: { x : 'center', y : 'bottom', data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'] }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'半径模式', type:'pie', radius : [20, 110], center : ['25%', 200], roseType : 'radius', width: '40%', // for funnel max: 40, // for funnel itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true }, labelLine : { show : true } } }, data:[ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] }, { name:'面积模式', type:'pie', radius : [30, 110], center : ['75%', 200], roseType : 'area', x: '50%', // for funnel max: 40, // for funnel sort : 'ascending', // for funnel data:[ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
②、main.qml import QtQuick 2.7 import QtQuick.Window 2.2 import QtWebEngine 1.2 Window { visible: true width: 1080 height: 800 WebEngineView { id: sitemonitoryView width:parent.width height:parent.height backgroundColor: "transparent" anchors.centerIn: parent settings.javascriptEnabled : true settings.pluginsEnabled:true url:"qrc:/html/pie.html" } }
③、main.cpp #include #include #include int main(int argc, char *argv[]) { QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QCoreApplication::setAttribute(Qt::AA_UseOpenGLES); QGuiApplication app(argc, argv); QQmlApplicationEngine engine; //注册applicationDirPath给qml调用 engine.rootContext()->setContextProperty( "applicationDirPath", QGuiApplication::applicationDirPath()); engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); if (engine.rootObjects().isEmpty()) return -1; return app.exec(); }原作者没有加这句话： QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);但是我运行了会报错，并且界面一动就会糊在一起，这句话是打开OPENGL
4、效果
长风破浪会有时，直挂云帆济沧海！ 可通过下方链接找到博主 https://www.cnblogs.com/judes/p/10875138.html |
【本文地址】
今日新闻 |
推荐新闻 |